<template>
    <el-table :data="news" height="600px" style="width: 100%" border v-loading="loading" ref="dataTable">
        <el-table-column 
            fixed
            prop="id"
            label="ID"
            width="80px">
        </el-table-column>
        <el-table-column 
            prop="title"
            label="标题"
            width="300px">
        </el-table-column>
        <el-table-column 
            prop="introduce"
            label="简介"
            width="400px">
        </el-table-column>
        <el-table-column 
            prop="thumb"
            label="缩略图"
            width="150px">
            <template #default="scope">
                <img :src="scope.row.thumb" style="object-fix: contain; height: 100px">
            </template>
        </el-table-column>
        <el-table-column 
            prop="addtime"
            label="添加时间"
            width="200px">
        </el-table-column>
        <el-table-column 
            prop="keywords"
            label="关键词"
            width="200px">
        </el-table-column>
        <el-table-column 
            fixed="right"
            label="操作"
            width="150px">
            <template #default="scope">
                <el-button type="text" size="small" @click="handleEdit(scope)">修改</el-button>
                <el-button type="text" size="small" @click="delNews(scope)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        layout="prev, pager, next"
        :total="count">
    </el-pagination>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { adminNews } from '@/api/content.js'
export default {
    name: "News",
    computed: {
        ...mapState('an',[
            'news',
            'count',
            'loading'
        ])
    },
    data(){
        return {
            loading: false,
            currentPage: 1,
            pageSize: 10,
            state: true
        }
    },
    
    methods: {
        ...mapMutations('an', [
            'getNews',
            'spliceNews',
            'setLoading'
        ]),
        handleEdit(scope){
            this.$store.dispatch('an/setEditNewsAction', scope)
        },
        
        async delNews(scope){
            this.setLoading(true)
            await adminNews.del(scope.row.id)
            this.setLoading(false)
            this.spliceNews(scope.index_)
        },
        handleCurrentChange(page){
            this.getNews(page)
        },
        handleSizeChange(psize){
            if (this.state == false){
                this.getNews(psize)
            }
        }
    },
    created(){
        this.getNews(1)
    }
}
</script>

<style lang="scss" scoped>
.el-table {
    /deep/ .el-table__body-wrapper {
        overflow: auto !important;
    }
}
</style>
